<html>
<head>
<title>led</title>
<script type="text/javascript"
	src="static/plugins/jquery/jquery-1.8.3.min.js"></script>
<style>
body {
	background-color: #fbede2;
	padding: 0 0;
	margin: 0 0;
}

div#bg {
	width: 100%;
	height: 100%;
	background: url(webpages/wx/led/images/bg2.jpg) top center no-repeat;
/* 	padding: 10px 10px; */
}

.star-red {
	background-image: url(webpages/wx/led/images/red4.png);
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	position: absolute;
	overflow: hidden;
	float:left;
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	left: 635px;
    top: 100px;
}
/* 691=683+8  180   、、675=683-8
683   预留80  右侧-8-40  左侧+8+40*/
.star-yellow {
	background-image: url(webpages/wx/led/images/yellow4.png);
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	position: absolute;
	overflow: hidden;
	float:right;
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	left: 715px;
    top: 100px;
}


@-webkit-keyframes fadeInOut {
    0% {
        opacity:1;
     }
    25% {
        opacity:0;
    }
    50% {
        opacity: 0;    
    }
    75% {
        opacity:1;
    }
}
.anim_fade_image {
    position:absolute;    
    -webkit-animation-name: fadeInOut;
    -webkit-animation-timing-function: ease-in-out;
/*     -webkit-animation-iteration-count: infinite; */
    -webkit-animation-duration: 7s;
    -webkit-animation-direction: alternate;
    animation-iteration-count:1;
	-webkit-animation-iteration-count:1; 
	animation-delay:3s;
}
</style>
</head>
<body>
	<div id="bg">
<!-- 		<div class="star-red"></div> -->
<!-- 		<div class="star-yellow"></div> -->
	</div>
</body>
<script type="text/javascript">
var width = $(document.body).width();
var height = $(document.body).height();
var centerX = width/2 -8;
var centerY = 180;
var beginX = centerX-80/2; //预留80放头像
var startCount = ${count!0};
var signCount = ${signCount!0};
var indexSign = signCount;
$(function() {
	console.log($(document.body).width());
	console.log($(document.body).height());
	
// 	$('#bg').append('<div class="star-red"></div>');
	
	for ( var i = 1; i <= startCount; i++) {
		if(i<=signCount) {
			$('#bg').append('<div class="star-red" id="star'+i+'"></div>');
			 $("#star"+i).css("left",RandomNumBoth(16,width-16)+"px");
			 $("#star"+i).css("top",RandomNumBoth(0,180)+"px");
			 var rotate = RandomNumBoth(0,360);
			 $("#star"+i).css("-webkit-transform","rotate("+rotate+"deg)");
			 $("#star"+i).css("transform","rotate("+rotate+"deg)");
		} else {
			$('#bg').append('<div class="star-yellow" id="star'+i+'"></div>');
			 $("#star"+i).css("left",RandomNumBoth(16,width-16)+"px");
			 $("#star"+i).css("top",RandomNumBoth(0,180)+"px");
			 var rotate = RandomNumBoth(0,360);
			 $("#star"+i).css("-webkit-transform","rotate("+rotate+"deg)");
			 $("#star"+i).css("transform","rotate("+rotate+"deg)");
		}
	}
	
// 	for ( var i = 80; i < 160; i++) {
// 		$('#bg').append('<div class="star-yellow" id="star'+i+'"></div>');
// 		 $("#star"+i).css("left",RandomNumBoth(centerX,width-16)+"px");
// 		 $("#star"+i).css("top",RandomNumBoth(0,180)+"px");
// 		 var rotate = RandomNumBoth(0,360);
// 		 $("#star"+i).css("-webkit-transform","rotate("+rotate+"deg)");
// 		 $("#star"+i).css("transform","rotate("+rotate+"deg)");
// 	}
	
	
});
//显示红色星星
function showRedStar(i) {
	if(!$("#star"+i)) {
		$('#bg').append('<div class="star-red" id="star'+i+'"></div>');
		 $("#star"+i).css("left",RandomNumBoth(0,centerX)+"px");
		 $("#star"+i).css("top",RandomNumBoth(0,180)+"px");
		 var rotate = RandomNumBoth(0,360);
		 $("#star"+i).css("-webkit-transform","rotate("+rotate+"deg)");
		 $("#star"+i).css("transform","rotate("+rotate+"deg)");
	} else {
		$("#star"+i).removeClass("star-yellow"); 
		$("#star"+i).addClass("star-red"); 
	}
	
}

setInterval('getSignInfo()',6000);
function getSignInfo() {
// 	$.get("getWxSignInfo.action", function(result){
// 		var array = result.obj;
// 		console.log(array);
// 		if(array&&array.length>0) {
// 			for(var item in array) {
// 				console.log(item);
// 				showImg(item.headImgUrl);
// 				showRedStar(++indexSign);
// 			}
// 		}
	   
// 	});
	
	$.post('getWxSignInfo.action',{},function(result){
		var array = result.obj;
		console.log(array);
		if(array&&array.length>0) {
			for(var item in array) {
				showImg(array[item].headImgUrl);
				//首次签到才计算星星
				if(array[item].flag=="0") {
					showRedStar(++indexSign);
				}
			}
		}
    },'json');
}
//弹出头像
function showImg(imgUrl) {
	var index = RandomNumBoth(0,1000000);
	var imgId = "img"+index;
	//头像
// 	if(!$("#"+imgId)) {
	
// 	}
	$('#bg').append('<img id="'+imgId+'" src="'+imgUrl+'" width="80"/>');
	$("#"+imgId).css("position","absolute");
	$("#"+imgId).css("left",RandomNumBoth(0,width-80));
	$("#"+imgId).css("top",RandomNumBoth(0,100));
	$("#"+imgId).css("border-radius","50%");
	$("#"+imgId).fadeOut(5000);
}


function RandomNumBoth(Min,Max){
    var Range = Max - Min;
    var Rand = Math.random();
    var num = Min + Math.round(Rand * Range); //四舍五入
    return num;
}
</script>
</html>